<template>
  <div class="work-container">
    <div>
      <div class="title-device-name">{{ detailData.deviceName }}</div>
      <div class="device-detail-info">
        <p>设备编号：{{ detailData.deviceNumber }}</p>
        <div class="device-detail-stick"></div>
        <p>合同编号：{{ detailData.protocol }}</p>
      </div>
    </div>

    <div class="workReport-padding">
      <div class="workReport-box">
        <div class="workReport-top">
          <span class="workReport-name-text">故障代码</span>
        </div>
        <p class="workReport-tips-text">{{ detailData.errorCode }}</p>
      </div>
    </div>
    <div class="workReport-padding">
      <div class="workReport-box">
        <div class="workReport-top">
          <span class="workReport-name-text">故障名称</span>
        </div>
        <p class="workReport-tips-text">{{ detailData.errorName }}</p>
      </div>
    </div>
    <div>
      <div>
        <div class="add-name-box">
          <span class="add-name-text">故障描述</span>
        </div>
        <van-field
          v-model="detailData.errorDesc"
          placeholder="限输入100个字"
          error-message=""
          maxlength="100"
          show-word-limit
        />
      </div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">现场联系人</span>
      </div>
      <van-field v-model="detailData.contacts" maxlength="6" placeholder="限输入6个字" error-message="" />
    </div>
    <div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">联系人电话</span>
      </div>
      <van-field v-model="detailData.contacts_tel" type="tel" maxlength="11" placeholder="请输入" error-message="" />
    </div>

    <div class="workReport-padding">
      <div class="workReport-box">
        <div>
          <span class="add-name-text">现场图片</span>
          <div class="img-tips-text">图片不大于2M，最多不能超过5张</div>
        </div>
        <div class="img-box">
          <van-uploader v-model="fileList" max-count="5" :before-read="uploadImg" />
        </div>
      </div>
    </div>

    <div>
      <div class="add-name-box">
        <span class="add-name-text">设备地址</span>
      </div>
      <van-field
        v-model="detailData.deviceAddress"
        maxlength="30"
        placeholder="限输入30个字"
        error-message=""
        @input="detailData.deviceAddress = detailData.deviceAddress.replace(/^ +| +$/g, '')"
      />
    </div>
    <div>
      <div class="add-name-box">
        <span class="add-name-text">所属公司</span>
      </div>
      <van-field v-model="detailData.company" disabled placeholder="请输入" error-message="" />
    </div>
    <div class="button-margin">
      <van-button block type="info" @click="submit">确 定</van-button>
    </div>
  </div>
</template>
<script>
import {
  Form,
  ActionSheet,
  Cell,
  CellGroup,
  Field,
  Button,
  Switch,
  Uploader,
  Popup,
  Search,
  Notify,
  Toast
} from 'vant';
import {
  getAlarmNoticeDetail,
  confirmAlarmNotice,
  neglectAlarmNotice,
  transferAlarmOrder,
  createOrder,
  getDeviceLastContact
} from '@/api/maintenanceAlarmNotification';
import { uploadFile } from '@/api/maintenanceView';
import dayjs from 'dayjs';
export default {
  name: 'alarmTransforOrder',
  components: {
    [Form.name]: Form, //表单
    [ActionSheet.name]: ActionSheet, //动作面板
    [Field.name]: Field, //输入框
    [Button.name]: Button, //按钮
    [Switch.name]: Switch, //开关
    [Cell.name]: Cell, //单元格
    [CellGroup.name]: CellGroup, //单元格
    [Uploader.name]: Uploader, //上传文件
    [Popup.name]: Popup, //弹窗
    [Search.name]: Search,
    [Toast.name]: Toast,
    [Notify.name]: Notify
  },
  data() {
    return {
      sheetShow: false, //打开面板
      sheetActions: [{ name: '维修工单' }, { name: '保养工单' }],
      sheetWorkValue: '维修工单',
      deviceName: '', //设备名称
      deviceId: '', //设备id
      deviceExplain: '', //故障描述
      explainTrue: false, //判断是故障描述还是保养说明
      workReport: false, //上次供应商
      workContacts: '', //现场联系人
      workPhone: '', //联系人电话
      deviceAddres: '', //设备地址
      workCompany: '', //所属公司
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      showVar: false,
      searchKey: '',
      id: '', //通知id,
      detailData: '',
      files: ''
    };
  },
  created() {
    this.id = this.$route.query.id || '';
    this.getDetail();
  },

  mounted() {},
  methods: {
    //选择工单类型
    onSheetSelect(item) {
      this.show = false;
      if (item.name === '保养工单') {
        this.explainTrue = true;
      } else {
        this.explainTrue = false;
      }
      this.explainTrue;
      this.sheetWorkValue = item.name;
      console.log(this.fileList);
    },
    upload(file) {},
    //获取详情
    getDetail() {
      getAlarmNoticeDetail({ id: this.id }).then(res => {
        console.log(res);
        this.detailData = res.data;
        this.getDeviceInfo(this.detailData.deviceId);
      });
    },
    //获取设备附加信息
    getDeviceInfo(deviceId) {
      getDeviceLastContact({ device_id: deviceId }).then(res => {
        this.$set(this.detailData, 'contacts', res.data.contacts);
        this.$set(this.detailData, 'contacts_tel', res.data.contacts_tel);
        console.log(this.detailData);
      });
    },
    uploadImg(file) {
      //上传图片
      const isLt3M = file.size / 1024 / 1024 < 2;
      if (!isLt3M) {
        Toast('只能上传小于2M!');
        this.files = null;
        return;
      }
      this.files = file;
      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', this.files);
      uploadFile(formData).then(res => {
        this.fileList.push({ url: res.data.path });
      });
    },
    //创建工单
    submit() {
      let params = {};
      params.address = this.detailData.deviceAddress; //地址
      params.contacts = this.detailData.contacts; //联系人
      params.contacts_tel = this.detailData.contacts_tel; //联系电话
      params.fault_id = parseInt(this.detailData.errorCode); //故障记录
      params.description = this.detailData.errorDesc; //故障描述
      params.device_id = parseInt(this.detailData.deviceId);
      params.device_number = this.detailData.deviceNumber;
      params.device_name = this.detailData.deviceName;

      params.plan_message_at = dayjs(this.detailData.time).format('YYYY-MM-DD HH:mm:ss'); //保养计划推送时间
      params.is_report = 1;
      params.order_type = 1; //必然是维修工单
      params.project_number = parseInt(this.detailData.project_contract) || 0;
      params.source = 2;
      params.photos = [];
      if (this.fileList) {
        this.fileList.forEach(res => {
          params.photos.push(res.url);
        });
      }

      console.log(params);
      // this.$refs.handleForm.validate(valid => {
      // if (!valid) return;
      createOrder(params).then(res => {
        if (res.message === '200') {
          Toast('工单创建成功');
          transferAlarmOrder;
          transferAlarmOrder({ id: parseInt(this.id), orderId: res.data }).then(res => {
            this.$toast({
              message: '工单创建成功！',
              onClose: () => {
                // this.$router.push({
                //   name: 'alarmNotification',
                //   query: {}
                // });
                this.$router.go(-2);
              }
            });
          });
        }
      });
      // });
    }
  }
};
</script>
<style lang="scss" scoped>
.work-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.426667rem;
  padding-bottom: 1.866667rem;
}
.van-cell {
  padding-left: 0 !important;
}
.app-form-red {
  color: #f56c6c;
  font-size: 0.32rem;
}

.add-name-text {
  color: #666666;
  font-size: 0.346667rem;
}
.title-device-name {
  color: rgb(51, 51, 51);
  font-size: 0.426667rem;
}
.device-detail-info {
  border-bottom: 1px solid #f2f6fc;
  display: flex;
  width: 100%;
  padding: 0.32rem;
  padding-left: 0;
  justify-content: flex-start;
  p {
    color: rgb(153, 153, 153);
    font-size: 0.32rem;
  }
  .device-detail-stick {
    height: 0.32rem;
    width: 0;
    border: 0.026667rem solid rgb(153, 153, 153);
    margin: 0 0.2rem;
  }
}
::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
}
.img-tips-text {
  font-size: 0.32rem;
  color: #999999;
  padding-top: 0.133333rem;
}
//上报供应商
.workReport-padding {
  .workReport-box {
    border-bottom: 1px solid #f2f6fc;
  }
  .workReport-top {
    display: flex;
    justify-content: space-between;
  }
  .workReport-name-text {
    margin-top: 0.266667rem;
    color: #666666;
    font-size: 0.373333rem;
  }
  .workReport-tips-text {
    font-size: 0.346667rem;
    color: #999999;
    padding: 0.4rem 0;
  }
}
.img-box {
  margin-top: 0.426667rem;
}

//按钮
.button-margin {
  margin: 0;
  position: fixed;
  width: 91%;
  bottom: 0.053333rem;
  padding-bottom: 0.533333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//选择器
.van-popup--bottom {
  border-top-left-radius: 0.426667rem;
  border-top-right-radius: 0.426667rem;

  .var-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .var-box-header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.213333rem;
      padding: 0 0.426667rem;
      padding-top: 0.426667rem;

      .model-name {
        margin-right: 0.266667rem;
        font-size: 0.426667rem;
        line-height: 0.533333rem;
      }

      .model-choose {
        flex-shrink: 0;
        color: var(--color-deep-gary);
        font-size: 0.32rem;
      }
    }

    .var-search-box {
      flex-shrink: 0;
      margin-bottom: 0.213333rem;
      border-bottom: 1px solid var(--border-color);
    }

    .var-list {
      flex: 1;
      width: 100%;
      padding: 0 0.426667rem;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        border-bottom: 1px solid var(--border-color);

        &:last-of-type {
          border-bottom: 0;
        }
      }
    }

    .operate-box {
      flex-shrink: 0;
      display: flex;
      width: 100%;
      height: 1.28rem;
      border-top: 1px solid var(--border-color);

      li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        font-size: 0.426667rem;

        &:first-of-type {
          &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background-color: var(--border-color);
          }
        }
      }
    }
  }
}
</style>
